<!DOCTYPE html>
<html ng-app="aa">
	<head>
		<meta charset="UTF-8">
		<title>作用域</title>
		<script type="text/javascript" src="../js/angular.js" ></script>
		<script>
		/**
		 * $scope局部变量
		 * $rootScope全局变量  
		 * 先找局部变量，再去找全局变量。
		 *$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性.
		 *$scope的所有属性，都可以自动被视图访问到.
		 *$scope对象用来从数据模型向视图传递信息。同时，它也可以用来设置事
		 *件监听器，同应用的其他部分进行交互，以及创建与应用相关的特定业务逻辑。
		 *作用域的作用:
		 1)提供观察者以监视数据模型的变化;
		 2)可以将数据模型的变化通知给整个应用，甚至是系统外的组件;
		 3)可以进行嵌套，隔离业务功能和数据;
		 4)给表达式提供运算时所需的执行环境.
		 * */
		var aa=angular.module("aa",[]);
		aa.controller("Aaa",["$scope",function($scope){
			$scope.name='hello';
		}]);
		
		aa.controller("Bbb",["$scope","$rootScope",function($scope,$rootScope){
			$rootScope.age='hello rootscope';
			$scope.name="第二个";
		}]);
		
		aa.controller("Ccc",function($scope){
			$scope.name="压缩代码后，代码会失效。不要用这种写法。使用上面的写法，可以避免这种错误。";
		});
		
			
		</script>
	</head>
	<body>
		<div ng-controller="Aaa">
			<p>{{name}}</p>
			<p>{{age}}</p>
		</div>
		
		<div ng-controller="Bbb">
			<p>{{name}}</p>
		</div>
		
		
		<div ng-controller="Ccc">
			<p>{{name}}</p>
		</div>
		<!--
		在AngularJS应用的模板中使用多种标记，包括下面这些。
	 指令：将DOM元素增强为可复用的DOM组件的属性或元素。
	 值绑定：模板语法{{ }}可以将表达式绑定到视图上。
	 过滤器：可以在视图中使用的函数，用来进行格式化。
	 表单控件：用来检验用户输入的控件。		
		-->
	</body>
</html>
